<template>
    <div class="container-wrap">
        <div class="logo">
            <img :src="logoImg" />
        </div>
        <div class="container-login">
            <div class="container-input">
                <div class="input">
                    <div class="img">
                        <img :src="callPhoneImg" />
                    </div>
                    <input v-model="phone" type="text" maxlength="11" placeholder="请输入用户名或手机号">
                </div>
                <div class="input">
                    <div class="img">
                        <img :src="passWordImg" />
                    </div>
                    <input v-model="password" type="password" maxlength="12"  minlength="6" placeholder="请输入密码">
                    <checkbox :checked="checked" @click="checked = !checked">记住密码</checkbox>
                    <button class="login-btn" @click="loginFn">登&nbsp;&nbsp;录</button>
                    <div class="nav">
                        <!--<span @click="forgetFn">忘记密码？</span>-->
                        <span @click="registerFn">去注册 ></span>
                    </div>
                </div>
            </div>
        </div>
        <van-toast id="van-toast"/>
        <!--loading-->
        <!--<div style="position: absolute;z-index: 999;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.2);" v-show="loadingBool">-->
            <!--<van-loading vertical color="#333" size="60rpx" style="position:absolute;left:50vw;top:50vh;transform: translate(-50%,-50%);"></van-loading>-->
            <!--<p color="#333" style="position:absolute;left:50vw;top:56vh;font-size: 32rpx;transform: translate(-50%,-50%);">加载中...</p>-->
        <!--</div>-->
    </div>
</template>

<script>
    import { LoginInfo } from '@/providers/service'
    import { encryptByDES,decryptByDES } from '@/providers/Func'
    export default {
        name: 'login',
        data() {
            return {
                phone: '',
                password: '',
                checked: true,
                loading: false,
                publicURL: process.env.PUBLICIIMGURL,
                logoImg: `${process.env.PUBLICIIMGURL}logo.png`,
                callPhoneImg: `${process.env.PUBLICIIMGURL}callPhone.gif`,
                passWordImg: `${process.env.PUBLICIIMGURL}passWord.gif`,
//                loadingBool:false
            }
        },
        methods: {
            loginFn() {
                //表单验证
                if (!this.phone) {
                    this.$toast('请输入手机号码')
                    return false
                }
                this.loginInfoFn()
            },
            async loginInfoFn() {
                try {
                    let params = { Phone: this.phone, PassWord: this.password }
                    let res = await LoginInfo(params)
                    wx.setStorageSync('userInfo', res)
                    this.$toast('登录成功')
                    if (res) {
                        let remember = {}
                        if(this.checked){
                            remember.mobile = this.phone
                            remember.password = encryptByDES(this.password)
                            wx.setStorageSync('remember',remember)
                        }else{
                            remember.mobile = this.phone
                            remember.password = ''
                            wx.setStorageSync('remember',remember)
                        }
                        wx.switchTab({ url: '/pages/index/index' })
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            forgetFn() {
                this.$router.push({ path: '/pages/forget/index' })
            },
            registerFn() {
                this.$router.push('/pages/register/index')
            },
        },
        mounted(){
            if(this.$route.query.type){
                this.phone=''
                this.password=''
                this.checked=true
                this.loading=false
                wx.setStorageSync('remember','')
            }else{
                if(wx.getStorageSync('remember')){
                    let { mobile ,password } = wx.getStorageSync('remember')
                    this.phone = mobile
                    this.password = decryptByDES(password)
                }else{
                    this.phone = ''
                    this.password = ''
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    page {
        width: 100%;
        height: 100%;
    }

    .container-wrap {
        width: 100%;
        height: 100%;

        .logo {
            width: 100%;
            height: 360rpx;

            img {
                position: absolute;
                left: 222rpx;
                top: 76rpx;
                width: 315rpx;
                height: 236rpx;
            }
        }

        .container-login {
            /*margin-top: 66rpx;*/
            width: 584rpx;
            position: absolute;
            top: 432rpx;
            left: 76rpx;
            right: 88rpx;


            .container-input {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                height: 100%;
                font-size: 32rpx;
                color: #a3a3a3;
                box-sizing: border-box;

                .input {
                    height: 66rpx;
                    line-height: 66rpx;
                    width: 100%;
                    border: 4rpx solid #1da081;
                    border-radius: 14rpx;
                    /*margin-top: 40rpx;*/
                    align-items: center;

                    .img image {
                        position: relative;
                        left: 14rpx;
                        top: 10rpx;
                        width: 48rpx;
                        height: 50rpx;
                        float: left;
                    }

                    input {
                        width:484rpx;
                        height: 66rpx;
                        line-height: 66rpx;
                        float: left;
                        margin-left: 40rpx;
                        font-size: 30rpx;
                    }
                }

                .input:nth-child(2) {
                    margin-top: 42rpx;
                }

                checkbox {
                    width: 100%;
                    height: 30rpx;
                    margin: 36rpx 0 72rpx 0;
                }

                .login-btn {
                    font-size:28rpx;
                    height: 76rpx;
                    background: #1da081;
                    text-align: center;
                    line-height: 76rpx;
                    border-radius: 20rpx;
                    color: #fff;
                }

                .nav {
                    margin-top: 40rpx;
                    /*display: flex;*/
                    /*justify-content: space-between;*/
                    float:right;
                    font-size: 26rpx;

                    span:nth-child(2) {
                        color: #24d996;
                    }
                }
            }
        }
    }
</style>
